<template>
    <div>
            <div class="w home">
            <t-header></t-header>

            <!-- 轮播图 -->
            <div class="w">
                <div class="focus">
                    <!-- 箭头 -->
                    <a @click="previousFocus" href="javascript:;" class="el-icon-arrow-left arrow arrow-l"></a>
                    <a @click="nextFocus" href="javascript:;" class="el-icon-arrow-right arrow arrow-r"></a>
                    <!-- 轮播图 -->
                    <div ref="focus" class="focus-list">
                        <img
                        @click="playAlbum(item)"
                        :key="index"
                        v-for="(item, index) in newAlbum"
                        v-lazy="item.blurPicUrl">
                    </div>
                    <!-- 圆点 -->
                    <ul class="cirlce">
                        <li 
                        @click="setFocusIndex(index)" 
                        :class="focusIndex == index ? 'current-circle' : ''"
                        :key="index" 
                        v-for="(item, index) in newAlbum"
                        ></li>
                    </ul>
                </div>
            </div>

            <!-- 导航 -->
            <div class="icon">
                <div @click="jump('/singer')" class="icon-item">
                    <i class="iconfont">&#xe605;</i>
                    <span>歌手</span>
                </div>
                <div @click="jump('/newmusic')" class="icon-item">
                    <i class="iconfont">&#xe690;</i>
                    <span>新碟上架</span>
                </div>
            </div>

            <!-- 热门歌单 -->
            <div class="song-wrap">
                
                <div class="song-title">热门歌单</div>
                <div class="hot-song">
                    <div @click="jumpPrivese(item.id)" class="song-item" :key="index" v-for="(item, index) in hotSongList">
                        <img v-lazy="item.coverImgUrl">
                        <span>{{item.name}}</span>
                        <div>{{item.creator.nickname}}</div>
                    </div>
                </div>
            </div>
            <!-- 最新歌单 -->
            <div class="song-wrap">
                
                <div class="song-title">最新歌单</div>
                <div class="hot-song">
                    <div @click="jumpPrivese(item.id)" class="song-item" :key="index" v-for="(item, index) in newSongList">
                        <img v-lazy="item.coverImgUrl">
                        <span>{{item.name}}</span>
                        <div>{{item.creator.nickname}}</div>
                    </div>
                </div>
            </div>
            
            <!-- 最新专辑 -->
            <div class="song-wrap"> 
                <div class="song-title">最新专辑</div>
                <div class="hot-song">
                    <div @click="playAlbum(item)" class="song-item" :key="index" v-for="(item, index) in newAlbum">
                        <img v-lazy="item.picUrl">
                        <span>{{item.name}}</span>
                        <div>{{item.artist.name}}</div>
                    </div>
                </div>
            </div>

            
        </div>


        <t-footer ref="footer"></t-footer>
    </div>
    
</template>

<script>
import Header from '../components/Header'
import Footer from '../components/Footer'
export default {
    components: {
        't-header': Header,
        't-footer': Footer
    },
    data() {
        return {
            // 当前轮播图索引
            focusIndex: 0,
            // 热门歌单
            hotSongList: [],
            // 最新歌单
            newSongList: [],
            // 最新专辑
            newAlbum: []
           
        }
    },
    mounted() {
        this.getHotSong();
        this.getNewSong();
        this.getNewAlbum();
    },
    methods: {
        // 上一张
        previousFocus() {
            if (this.focusIndex === 0)
                return false;
            this.focusIndex = this.focusIndex - 1;
            this.focusMove();
        },
        // 下一张
        nextFocus() {
            if (this.focusIndex === this.newAlbum.length - 1)
                return false;
            this.focusIndex = this.focusIndex + 1;
            this.focusMove();
        },
        // 轮播图移动
        focusMove() {
            let moveStep = (-this.focusIndex * 1070) + 'px';
            this.$refs.focus.style.transform = `translateX(${moveStep})`;
        },
        // 点击圆点切换轮播图
        setFocusIndex(index) {
            this.focusIndex = index;
            this.focusMove();
        },
        // 获取热门歌单
        async getHotSong() {
            let { data: res } = await this.$http.get('/top/playlist', { params: {
                limit:10,
                order: 'hot'
            } });
            this.hotSongList = res.playlists.slice(0, 6);
            
        },
        // 获取最新歌单
        async getNewSong() {
            let { data: res } = await this.$http.get('/top/playlist', { params: {
                limit:10,
                order: 'new'
            } });
            this.newSongList = res.playlists.slice(0, 6);
            
        },
        // 获取最新专辑
        async getNewAlbum() {
            let { data: res } = await this.$http.get('/album/newest');
            this.newAlbum = res.albums.slice(0, 6);
        },
        // 跳转到详情
        jumpPrivese (id) {
            this.$router.push(`/privese/${id}`);
        },
        // 播放最新专辑的音乐
        async playAlbum(item) {
            let { data: res } = await this.$http.get('/album', { params: { id: item.id } });
            let { data: song } = await this.$http.get('/song/url', { params: { id: res.songs[0].id, br: 128000 } });
            this.$store.commit('setCurrentSongUrl', song.data[0].url);
            this.$store.commit('setCurrentSongInfo', res.songs[0]);
            this.$message.success('正在播放最新专辑的音乐');
            // 触发自动播放
            this.$nextTick(() => {
                this.$refs.footer.playSong(Math.random(), res.songs[0]);
                
            })
            
        },
        // 跳转
        jump(path) {
            this.$router.push(path);
        }
    }
}
</script>

<style lang="less" scoped>

.arrow {
    position: absolute;
    font-size: 30px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 50%;
    background-color: #f2f2f2;
    color: #606260;
    opacity: 0;
    transition: all .6s;
}
.arrow-l {
    left: 200px;
}
.arrow-r {
    right: 200px;
}
.focus {
    position: relative;
    overflow: hidden;
    height: 400px;
    &::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 130px;
        background-color: rgba(0, 0, 0, .4);
        z-index: 999;
    }

    .focus-list {
        position: relative;
        width: 1000%;
        height: 100%;
        transition: all .6s linear;
        img {
            float: left;
            width: 1070px;
            height: 100%;
            cursor: pointer;
        }
        img:last-child {
            width: 1200px!important;
        }
    }
    &:hover .arrow {
        opacity: 1;
    }
    .cirlce {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        li {
            color: #fff;
            float: left;
            height: 10px;
            width: 10px;
            border: 1px solid #fff;
            border-radius: 50%;
            margin: 0 6px;
            cursor: pointer;
        }
        .current-circle {
            background-color: #fff;
        }
    }

}

.icon {
    display: flex;
    margin-top: 20px;
    margin-bottom: 40px;
    i {
        color: #fc423f;
        font-size: 60px;
        margin-bottom: 10px;
    }
    .icon-item {
        flex: 1;
        display: flex;
        justify-items: center;
        align-items: center;
        flex-direction: column;
        color: #4a4a4a;
        font-size: 20px;
        cursor: pointer;
    }
}

.hot-song {
    display: flex;
    justify-content: space-around;
    color: #4a4a4a;
    font-weight: 700;
}

.song-title {
    color: #4a4a4a;
    font-size: 20px;
    font-weight: 700;
    padding-left: 10px;
    margin: 20px 0 10px 0;
}

.song-wrap {
    margin-top: 60px;
}

.song-item {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    width: 15%;
    img {
        width: 100%;
        height: 180px;
        margin-bottom: 10px;
    }
    div {
        color: #999;
        font-size: 14px;
        margin-top: 4px;
    }
}

</style>